<template>
  <div ref="d2Quill" class="d2-qull-wrapper">
    <div ref="editor"></div>

    <input
      ref="imgUpload"
      type="file"
      accept="image/*"
      name="file"
      class="formFile"
      @change="fileChange"
    />
  </div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { FileUpload } from "api/sys/file";

export default {
  name: "D2Quill",
  props: {
    value: {
      type: String,
      required: false,
      default: "",
    },
  },

  data() {
    return {
      Quill: undefined,
      currentValue: "",
      options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              // ['blockquote', 'code-block'],
              [{ list: "ordered" }, { list: "bullet" }],
              // [{ 'script': 'sub' }, { 'script': 'super' }],
              // [{ 'indent': '-1' }, { 'indent': '+1' }],
              // [{ 'direction': 'rtl' }],
              [{ size: ["small", false, "large", "huge"] }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }],
              // [{ 'font': [] }],
              [{ align: [] }],
              ["clean"],
              ["link", "image"],
            ],
            handlers: {
              image: (val) => {
                if (val) {
                  this.$refs.imgUpload.click();
                }
              },
            },
          },
        },
        placeholder: "请输入",
        readOnly: false,
      },
    };
  },
  watch: {
    value: {
      handler(val) {
        // 确认是新的值
        if (val !== this.currentValue) {
          this.currentValue = val;
          // 尝试更新
          if (this.Quill) {
            this.Quill.pasteHTML(this.value);
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const editor = this.$refs.editor;
      // 初始化编辑器
      this.Quill = new Quill(editor, this.options);
      // 默认值
      this.Quill.pasteHTML(this.currentValue);
      // 绑定事件
      this.Quill.on("text-change", () => {
        const html = this.$refs.editor.children[0].innerHTML;
        const text = this.Quill.getText();
        const quill = this.Quill;
        // 更新内部的值
        this.currentValue = html;
        // 发出事件 v-model
        this.$emit("input", html);
        // 发出事件
        this.$emit("change", { html, text, quill });
      });
      // 将一些 quill 自带的事件传递出去
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        this.$emit("text-change", delta, oldDelta, source);
      });
      this.Quill.on("selection-change", (range, oldRange, source) => {
        this.$emit("selection-change", range, oldRange, source);
      });
      this.Quill.on("editor-change", (eventName, ...args) => {
        this.$emit("editor-change", eventName, ...args);
      });

      this.Quill.blur();
    },
    /**
     * 文件选择事件
     */
    async fileChange(event) {
      try {
        const uploadFile = event.target.files[0];

        let formData = new FormData();
        formData.append("file", uploadFile);

        const { viewPath } = await FileUpload(formData);
        let length = this.Quill.getSelection(true).index;

        this.Quill.insertEmbed(length, "image", viewPath);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss">
.ql-container {
  min-height: 300px;
}
.ql-picker-label {
  line-height: 22px !important;
}
.ql-toolbar {
  line-height: normal !important;
}
.ql-snow .ql-picker-label::before {
  line-height: 22px !important;
}

.ql-snow .ql-picker {
  line-height: normal !important;
}
</style>

<style lang="scss" scoped>
.d2-qull-wrapper {
  position: relative;
}
</style>
